﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>123</title>
    <!-- 样式资源 -->
    <!-- Bootstrap 3.x 基础样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- FileInput 插件样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.5.2/css/fileinput.min.css" rel="stylesheet">

    <style>
        /* 上传区域样式 */
        .upload-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #f8f9fa;
        }

        /* 预览图片尺寸限制 */
        .file-preview-image {
            max-height: 120px !important; /* 覆盖插件默认样式 */
            object-fit: cover; /* 2025年新增图片裁剪模式 */
        }

        /* 拖拽排序手柄样式 */
        .order-handle {
            position: absolute;
            right: 10px;
            top: 5px;
            z-index: 1;
            cursor: move; /* 显示可拖拽光标 */
            color: #666;
        }
    </style>
</head>
<body>
<div class="container">
    <h2 class="page-header">商品图片上传系统</h2>

    <!-- 缩略图上传区域 -->
    <div class="upload-section">
        <h4><i class="glyphicon glyphicon-picture"></i> 缩略图上传（最多5张）</h4>
        <input id="thumbnailUpload" type="file" multiple>
    </div>

    <!-- 详情图上传区域 -->
    <div class="upload-section">
        <h4><i class="glyphicon glyphicon-film"></i> 详情图上传（最多10张）</h4>
        <input id="detailUpload" type="file" multiple>
    </div>

    <button onclick="lastTab()">上一步</button>

</div>

<!-- 脚本资源 -->
<!-- jQuery 基础库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- FileInput 核心脚本 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.5.2/js/fileinput.min.js"></script>
<!-- 中文本地化 -->
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.5.2/js/locales/zh.min.js"></script>

<script>
    function lastTab() {
        window.parent.$tabs.tabs('enableTab', '基本信息');

        window.parent.$tabs.tabs('select', '基本信息');

        window.parent.$tabs.tabs('disableTab', '设备详情');
    }

    /**
     * 图片存储模块
     * 使用 localStorage 实现数据持久化
     */
    const imageStore = (() => {
        const STORAGE_KEY = 'imageUploadDemo2025'; // 存储键名

        return {
            // 获取指定类型图片
            get: (type) => {
                try {
                    const data = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
                    return data[type] || [];
                } catch (e) {
                    console.error(' 本地存储读取失败:', e);
                    return [];
                }
            },

            // 保存指定类型图片
            save: (type, items) => {
                try {
                    const data = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
                    data[type] = items;
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
                } catch (e) {
                    console.error(' 本地存储写入失败:', e);
                }
            },

            // 清空所有存储（2025新增）
            clear: () => {
                localStorage.removeItem(STORAGE_KEY);
            }
        };
    })();

    /**
     * 文件处理模块
     */
    const fileHandler = {
        // 生成文件预览图
        createPreview: (file) => {
            return new Promise((resolve) => {
                const reader = new FileReader();
                reader.onload = (e) => resolve(e.target.result);
                reader.readAsDataURL(file);
            });
        },

        // 生成唯一文件ID
        generateId: () => Date.now() + '-' + Math.random().toString(36).substr(2, 9),

        // 文件验证（2025新增）
        validateFile: (file) => {
            const MAX_SIZE = 5 * 1024 * 1024; // 5MB限制
            if (file.size > MAX_SIZE) {
                return {valid: false, message: '文件大小不能超过5MB'};
            }
            return {valid: true};
        }
    };

    /**
     * 初始化上传组件
     * @param {string} selector 选择器
     * @param {object} config 配置项
     */
    function initUploader(selector, config) {
        const {maxCount, type} = config;

        $(selector).fileinput({
            language: 'zh',      // 中文支持
            theme: 'fas',        // 2025新增图标库
            uploadAsync: false,  // 同步上传模式
            maxFileCount: maxCount,
            allowedFileTypes: ['image'],
            allowedFileExtensions: ['jpg', 'png', 'jpeg', 'webp'], // 2025新增webp支持
            showClose: false,
            showCaption: false, // 是否显示标题
            showRemove: false, // 是否显示移除按钮
            showUpload: true, // 是否显示上传按钮
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            validateInitialCount: true,

            // 布局模板定制
            layoutTemplates: {
                // actionDelete: '',      // 隐藏删除按钮
                actionZoom: '',        // 隐藏放大按钮
                indicatorActions: '<div class="order-handle">{drag}</div>'
            },

            // 初始预览数据
            initialPreview: imageStore.get(type).map(img => img.preview),
            initialPreviewConfig: imageStore.get(type).map(img => ({
                caption: img.name,
                key: img.id,
                extra: {type}
            })),

            // 上传配置
            uploadUrl: 'tabSave', // 模拟上传地址
            uploadExtraData: {type},  // 附加数据
            fileActionSettings: {       // 2025新增操作设置
                showDrag: true,
                showRemove: false
            },

            // 文件验证（2025新增）
            filepreupload: (event, data) => {
                const validation = fileHandler.validateFile(data.files[0]);
                if (!validation.valid) {
                    setTimeout(() => alert(validation.message), 10);
                    return false;
                }
            },

            // 上传完成处理
            fileuploaded: function (event, data) {
                const formData = new FormData();
                formData.append('files', data.files[0]);
                formData.append('type', type);
                //
                // fetch('/api/images', {
                //     method: 'POST',
                //     body: formData
                // }).then(response => response.json())
                //     .then(data => {
                //         if (data.code === 200) {
                //             // 更新前端预览
                //             this.addPreview(data.data);
                //         }
                //     })
            },

            // 文件删除处理
            fileremoved: function (event, id) {
                const items = imageStore.get(type).filter(item => item.id !== id);
                imageStore.save(type, items);
            }
        }).on('filesorted', function (event, params) {
            // 处理拖拽排序
            const sortedItems = params.stack
                .map(id => imageStore.get(type).find(item => item.id === id))
                .filter(Boolean);
            imageStore.save(type, sortedItems);
        });
    }

    // 初始化上传组件
    $(function () {
        // 缩略图上传器
        initUploader('#thumbnailUpload', {
            type: 'thumbnail',
            maxCount: 5
        });

        // 详情图上传器
        initUploader('#detailUpload', {
            type: 'detail',
            maxCount: 10
        });

        // 2025新增控制台提示
        console.log('%c 当前版本：1.2.0 (2025-02)',
            'color: #fff; background: #2c3e50; padding: 2px 5px;');
    });
</script>
</body>
</html>
